<template>
  <div class="wrap">
    <!-- dom 元素层级在上层的 -->
    <Search />

    <div class="msg"
         @click="goMsg">
      <van-badge :content="200" max="99" />
      <Icon class="message-3-fill"
            icon="message-3-fill" />
      <span>消息</span>
    </div>

    <Alarm v-show="alarmListFlag"
           :interName="interName"
           @closeAlarm="hiddenAlarm" />

    <Warn v-show="warningListFlag"
          :interName="interName"
          @closeWarn="hiddenWarn" />

    <Inter v-if="interDetailFlag" />

    <keep-alive>
      <D-map :inters="inters"
             @showAlarm="showAlarmFn"
             @warnShow="warnShowFn"
             @interDetail="interDetailFn" />
    </keep-alive>

  </div>

</template>

<script lang="ts">
import {
  defineComponent,
  toRefs,
  onMounted,
  onActivated,
  onDeactivated,
} from 'vue'
import { useRouter } from 'vue-router'
import DMap from '/@/components/map/Map.vue'
import Search from '/@/components/search/Search.vue'
import Icon from '../../components/Icon/Icon.vue'
import { methods } from './lib/methods'
import Alarm from './components/alarm/index.vue'
import Warn from './components/warning/index.vue'
import Inter from './components/inter/index.vue'
import { state } from './lib/state'

export default defineComponent({
  components: {
    DMap,
    Icon,
    Search,
    Alarm,
    Inter,
    Warn,
  },
  setup() {
    const router = useRouter()

    const goMsg = () => {
      router.push('/msg')
    }

    onMounted(() => {
      /**
       * 接口请求
       */
      console.info('接口请求======')
    })

    /**
     * @Description 页面被缓存后不走 mount 进 onActivated ，需在此钩子中重新请求接口数据
     * 官网上是没有定义这两个钩子函数的，当使用keep-alive 被激活时候，onActivated, onDeactivated 这两个钩子自动激活
     * 参考 vue3 源码 runtime-core: 840
     * 进入时激活
     * @date 2021-03-11
     * @param {any} (
     * @returns {any}
     */
    onActivated(() => {
      /**
       * 接口请求
       */
      console.info('onActivated======')
    })

    /**
     * @Description 离开时激活
     * @date 2021-03-11
     * @param {any} (
     * @returns {any}
     */
    onDeactivated(() => {
      console.info('onDeactivated======')
      //   state.alarmListFlag = false
      //   state.interDetailFlag = false
    })

    return {
      ...toRefs(state),
      goMsg,
      ...methods,
    }
  },
})
</script>


<style lang="less" scoped>
@import './lib/home.less';
</style>

